<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta name="author" content="Darko Bunic"/>
		<meta name="description" content="Drag and drop table content with JavaScript"/>
		<meta name="viewport" content="width=device-width, user-scalable=no"/><!-- "position: fixed" fix for Android 2.2+ -->
		<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
		<script type="text/javascript" src="../header.js"></script>
		<script type="text/javascript" src="../redips-drag-min.js"></script>
		<script type="text/javascript" src="script.js"></script>
		<title>Example 13: Nested tables</title>
	</head>
	<body>
		<center>
			<!-- tables inside this DIV could contain drag-able content  -->
			<div id="drag">
				<table>
					<colgroup>
						<col width="300"/>
						<col width="100"/>
						<col width="100"/>
					</colgroup>
					<tbody>
						<tr>
							<!-- cell containing nested table -->
							<td>
								<!-- second level -->
								<table class="nested_table1">
									<colgroup>
										<col width="150"/>
										<col width="50"/>
										<col width="50"/>
									</colgroup>
									<tbody>
										<tr>
											<td>
												<!-- third level of nested table -->
												<table class="nested_table2">
													<colgroup>
														<col width="55"/>
														<col width="55"/>
													</colgroup>
													<tbody>
														<tr>
															<td><div class="drag circle">A</div></td>
															<td></td>
														</tr>
														<tr>
															<!-- table cell contains nested table (table cell is not allowed) -->
															<td colspan="2" class="mark">
																<table class="nested_table3">
																	<colgroup>
																		<col width="50"/>
																		<col width="50"/>
																	</colgroup>
																	<tbody>
																		<tr>
																			<td><div class="drag circle">A</div></td>
																			<td></td>
																		</tr>
																		<tr>
																			<td></td>
																			<td></td>
																		</tr>
																	</tbody>
																</table>
															</td>
														</tr>
													</tbody>
												</table>
											</td>
											<td></td>
											<td></td>
										</tr>
										<tr>
											<td></td>
											<td><div class="drag circle">A</div></td>
											<td></td>
										</tr>
									</tbody>
								</table>
							</td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td></td>
							<td><div class="drag square">B</div></td>
							<td></td>
						</tr>
					</tbody>
				</table>
				<table>
					<colgroup>
						<col width="200"/>
						<col width="100"/>
						<col width="100"/>
					</colgroup>
					<tbody>
						<tr>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td></td>
							<td><div class="drag circle">C</div></td>
							<td></td>
						</tr>
						<tr>
							<!-- nested table is accessible (container is not) -->
							<td class="mark">
								<table class="nested_table1">
									<colgroup>
										<col width="50"/>
										<col width="50"/>
										<col width="50"/>
									</colgroup>
									<tbody>
										<tr>
											<td></td>
											<td></td>
											<td></td>
										</tr>
										<tr>
											<td></td>
											<td><div class="drag square">D</div></td>
											<td></td>
										</tr>
										<tr>
											<td>
											</td>
											<td></td>
											<td></td>
										</tr>
									</tbody>
								</table>
							</td>
							<td></td>
							<td>
								<table class="nested_table1">
									<colgroup>
										<col width="50"/>
									</colgroup>
									<tbody>
										<tr>
											<td></td>
										</tr>
										<tr>
											<td><div class="drag square">D</div></td>
										</tr>
										<tr>
											<td></td>
										</tr>
									</tbody>
								</table>
							</td>
						</tr>
					</tbody>
				</table>
				<!-- table is not nested and doesn't contain nested tables -->
				<table>
					<colgroup>
						<col width="50"/>
						<col width="50"/>
						<col width="50"/>
						<col width="50"/>
						<col width="50"/>
						<col width="50"/>
					</colgroup>
					<tbody>
						<tr>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td></td>
							<td><div class="drag square">D</div></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
						<tr>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
							<td></td>
						</tr>
					</tbody>
				</table>
				<!-- message -->
				<div class="message">
					Elements can be cloned with SHIFT key (press SHIFT key and drag element)
				</div>
			</div>
			<br/>
		</center>
	</body>
</html>